<template>
    <div class="integral">
        <tool-bar3 :names="names"></tool-bar3>

        <div class="content">
            <div class="bg-cover">
                <div class="top">
                    <p>本次可用于兑换</p>

                </div>
                <div class="bottom">
                    <p>{{defaultIntegral}}<span>ABNB</span></p>
                </div>
            </div>
            <div class="exchangeBox">
                <div class="ex-num-title">
                    <p>兑换数量</p>
                    <p>
                        <input type="number" placeholder="填写兑换使用的积分数量" v-model="exchangeData.integral"><span class="unit">ABNB<span class="all" @click="getAll">全部</span></span>
                    </p>
                </div>
                <div class="list-item">
                    <p>本次将兑换</p>
                    <p><span class="number">{{(exchangeData.integral/this.$route.params.price)|parseint}}</span>{{this.$route.params.desc}}</p>
                </div>
                <div class="list-item">
                    <p>充币地址</p>
                    <input type="text" placeholder="填写充币地址" v-model="exchangeData.addr">
                </div>
                <p class="btn" @click="sub">确认兑换</p>
            </div>

            <div class="tips">
                <p class="title">兑换须知</p>
                <p class="text">请务必准确填写您的充币地址，一旦切人兑换因充币地址错误造成的损失由用户自行承担，手续费按着火币标准执行。顿换请联系客服微信审核。</p>
            </div>

        </div>
    </div>
</template>

<script>
    import ToolBar3 from "./ToolBar3";
    export default {
        name: "Recharge",
        components: {ToolBar3},
        data(){
            return {
                names:'兑换'+this.$route.params.desc,
                defaultIntegral:0,
                exchangeData:{
                    integral:0,
                    addr:'',
                    id:this.$route.params.id,
                    token:this.getCookie("token")
                }

            }
        },
        filters:{
            parseint(val){
                let num = ''
                num = val.toFixed(4)
                return num
            }
        },
        mounted() {

            this.$api.my.getIntegral(this.getCookie('token')).then(res=> {
                // 执行某些操作
                this.defaultIntegral = res.data.data
            })


        },
        methods:{
            getAll(){
                this.exchangeData.integral = this.defaultIntegral
            },
            sub(){
                this.$api.my.IntegralExchangeThing(this.exchangeData).then(res=> {
                    // 执行某些操作
                    this.$toast({
                        message: res.data.msg,
                        duration: 1000,
                        forbidClick: true
                    })
                })

            }
        }
    }
</script>

<style scoped>
    .content{
        position: absolute;
        top: 3rem;
        left: 0;
        right: 0;
    }
    .bg-cover{
        width: 100%;
        height: 10.13rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        background: url("../../assets/img/bg_score.png") no-repeat;
        background-size:100% 100%;
        padding: 2rem 2rem 4rem 2rem;
    }
    .top{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .top p{
        width: 100%;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:1.13rem;
        opacity:0.8;
        text-align: left;
    }
    .bottom{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bottom p:first-child{
        font-size:1.75rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        display: flex;
        align-items: baseline;

    }
    .bottom p:first-child span{
        font-size: 0.84rem;
        font-weight: 500;
    }
    .exchangeBox{
        width: 90%;
        margin: 1rem auto;
        background: #fff;
        border-radius: 0.5rem;
        padding-bottom: 1rem;
    }
    .ex-num-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0.2rem 0.5rem;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee;
        height: 4rem;
    }
    .ex-num-title p{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .ex-num-title p:first-child{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .ex-num-title p input{
        outline: none;
        border: none;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:#333;
    }
    .ex-num-title p input::placeholder{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .ex-num-title p .unit{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .ex-num-title p .all{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:#14A365;
        display: inline-block;
        padding-left: 0.2rem;
        border-left: 2px solid #14a365;
        margin-left: 0.2rem;
    }
    .list-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.2rem 0.5rem;
        border-bottom: 1px solid #eee;
        height: 4rem;
    }
    .list-item p{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .list-item p .number{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
        margin-right: 0.3rem;
    }
    .list-item input{
        outline: none;
        border: none;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:400;
        color:#333;
        width: 6rem;
    }
    .list-item input::placeholder{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
    .btn{
        width:18.75rem;
        height:2.5rem;
        background:rgba(20,163,101,1);
        border-radius:0.2rem;
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 3rem auto 0 auto;
    }
    .tips{
        width: 90%;
        margin: 1rem auto;
        background: #fff;
        border-radius: 0.5rem;
        padding: 1rem 0;
    }
    .tips .title{
        height: 0.88rem;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding-left: 0.5rem;
        border-left: 0.2rem solid #14A365;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .tips .text{
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding:0.7rem;
        line-height: 1.13rem;
        text-align: left;
    }

</style>